<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<input type="text" name="search" placeholder="请输入书名" />
			<button type="button" id="btn_search">搜索</button>
			<button type="button" id="btn_add">添加</button>
			<button type="button" id="btn_delSelected">批量删除</button>
			<button type="button" id="btn_download">下载选中数据</button>
			<button type="button" id="btn_rowEdit" hidden>退出行编辑模式</button>
		</div>
		<table border="1">
			<thead>
				<th><input type="checkbox" name="cb_select_all" /></th>
				<th>id</th>
				<th>名称</th>
				<th>价格</th>
				<th>出版日期</th>
				<th>数量</th>
				<th>操作</th>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script src="../../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let $tbody = $("table").find("tbody");
			$("#btn_search").click(load);
			$("#btn_add").click(function() {
				location.href = "03-add.html";
			});
			
			function toEdit(name) {
				sessionStorage.setItem("index", name);
				location.href = "03-add.html";
			}
			
			function load() {
				//获取列表数据显示
				let name = $("input[name='search']").val();
				$.get("http://localhost:8080/list?name=" + name, function(result) {
					console.log(result);
					if(result instanceof Array) {
						$tbody.empty();
						$.each(result, function(index, item) {
							let tr = `
								<tr>
									<td title="noedit"><input type="checkbox" name="cb_select" value="${item.id}" /></td>
									<td title="id">${item.id}</td>
									<td title="name">${item.name}</td>
									<td title="price">${item.price}</td>
									<td title="tdate">${item.date}</td>
									<td title="count">${item.count}</td>
									<td title="noedit">
										<button type="button" onclick="toEdit('${item.name}')">编辑</button>
										<button type="button" onclick="del(${index})">删除</button>
									</td>
								</tr>
							`;
							$tbody.append(tr);
						});
					}
				});
			}
			load();
		</script>
	</body>
</html>
